
<template>
  <div class="login-content-box">
    <div style="background-color: white;  display: flex;">
      <!-- 左侧背景图 -->
      <div class="login-left">
      </div>
      <!-- 右侧表单区域 -->
      <div class="login-right">
        <div class="login-title" >忘记密码</div>
        <div class="login-form">
          <el-form ref="resetFormRef" label-position="top" hide-required-asterisk="true" :rules="resetFormRules"  :model="resetForm"  class="login-form">

            <el-form-item label="手机号码" class="block-label" prop="username" >
              <el-input v-model="resetForm.username"
                        placeholder="请输入手机号码"
                        class="custom-height-input"
                        :prefix-icon="Phone"></el-input>
            </el-form-item>

            <!-- 新增的验证码部分 -->
            <el-form-item label="验证码" class="block-label" prop="captcha" >
              <el-input v-model="resetForm.captcha" placeholder="请输入验证码" prefix-icon="el-icon-view" class="custom-height-input" style="width: 183px; margin-right: 5px;"></el-input>
              <el-button type="primary"  style="height: 35px;width: 80px;font-size:12px;" :disabled="countDown > 0" :type="countDown > 0 ? 'default' : 'primary'" @click="handleGetCaptcha">{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}</el-button>
            </el-form-item>

            <el-form-item label="新密码" class="block-label" prop="password" >
              <el-input v-model="resetForm.password"
                        type="password"

                        placeholder="请输入密码"
                        class="custom-height-input"
                        :prefix-icon="Lock"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" class="block-label" prop="surePassword" >
              <el-input v-model="resetForm.surePassword"
                        type="password"
                        placeholder="请再次输入密码"
                        class="custom-height-input"
                        :prefix-icon="Lock"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="resetPassword" style="width: 100%;">重置密码</el-button>
            </el-form-item>

            <el-form-item>
              <div @click="handleLogin" class="no-hover-underline" style="width: 100%; text-align: center;letter-spacing: 2px">返回登录</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入图标组件
import { User, Lock,Phone } from '@element-plus/icons-vue';
// 背景图路径（你可以替换为实际路径）
import {reactive, ref} from "vue";
import { useRouter } from 'vue-router'
const router = useRouter();
import {ElMessage} from "element-plus";
const bgImage = new URL('../assets/login-bg.jpg', import.meta.url).href;
const emit = defineEmits(['switch-view']);

const resetForm = reactive({
  username: '',
  password: '',
  captcha:'',
  surePassword:'',
});
// 表单引用
const resetFormRef = ref(null);


// 倒计时变量
const countDown = ref(0);

// 倒计时时长（秒），可根据需求调整
const countDownTime = 60;

const handleGetCaptcha = () => {
  // 1. 先简单模拟调用接口发送验证码逻辑（实际需替换为真实接口请求）
  console.log('开始调用接口发送验证码...');
  // 这里可添加 axios 等发起请求代码，比如：
  // axios.post('/api/sendCaptcha', { phone: ... }).then(res => {
  //   if (res.data.code === 200) {
  //     // 发送成功，开始倒计时
  //     startCountDown();
  //   }
  // });

  // 2. 调用倒计时方法
  startCountDown();
};



const startCountDown = () => {
  countDown.value = countDownTime;
  const timer = setInterval(() => {
    countDown.value--;
    if (countDown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 验证规则
const resetFormRules = {
  username: [{ required: true, message: '请输入登录账号', trigger: 'blur' },],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' },],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
  surePassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' },]
};

const resetPassword = () => {
  // 表单验证
  resetFormRef.value.validate((valid) => {
    if (valid) {
      console.log('重置密码逻辑处理', resetForm);
      // 这里可以添加实际登录请求代码
      router.push({name: 'System'})
    } else {
      // 验证失败
      return false;
    }
  });

};


// 返回登录
const handleLogin = () => {
  emit('switch-view', 'LoginComponent');
};


</script>
<style scoped lang="scss">
.login-content-box{
  width: 100%;
  background-color: #f5f7fa;
  .login-left {
    width: 300px;
    margin-right: 10px;
    background-size: cover;        // 覆盖整个容器
    background: url("../assets/main_app/忘记密码.png") no-repeat center center;
    background-size: 100% 100%;
    borerder-radius: 10px !important;
  }
  .login-right {
    flex: 1;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 12px rgba(215, 85, 85, 0.1);
    padding: 20px 20px;
    .login-title{
      font-size: 22px;
      font-weight: bolder;
      padding-bottom: 10px;
      letter-spacing: 2px;
    }
    .login-form {
      .el-button{
        background-color: #43A2A3;
        letter-spacing: 2px;
        height: 40px;
        width: 100%;
      }

      .no-hover-underline{
        cursor: pointer;
        color: #43A2A3;
      }

      /* 自定义复选框选中颜色 */
      .custom-checkbox {
        /* 控制选中状态的背景色和边框色 */
        --el-checkbox-checked-bg-color: #43A2A3; /* 复选框选中后的背景色 */
        --el-checkbox-checked-border-color: #43A2A3; /* 复选框选中后的边框色 */
        --el-checkbox-indeterminate-bg-color: #43A2A3; /* 半选状态的背景色 */
        --el-checkbox-indeterminate-border-color: #43A2A3; /* 半选状态的边框色 */
      }
      /* 可选：修改复选框的大小 */
      .custom-checkbox .el-checkbox__inner {
        width: 16px;
        height: 16px;
      }
      /* 可选：修改勾选图标的颜色 */
      .custom-checkbox .el-checkbox__inner::after {
        border-color: #fff; /* 勾选图标的颜色 */
      }
    }
  }
}
/* 两端对齐的表单项样式 */
.checkbox-forgot-item {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-checkbox.is-checked .el-checkbox__label {
  color: #43A2A3;
}
.el-form-item{
   margin-bottom: 12px !important;
}
</style>
